<template>
  <div style="background-color: #f6f6f6; height: 870px" class="awsCenter">
    <div style="background-color: white; width: 75%; height: 95%; border-radius: 25px; padding: 20px;">
      <div style="display: flex;flex-direction:row;width: 100%;border: black 0px solid">  <!--使用弹性布局，使子元素水平排列 -->
        <div style="width: 20px;  /* 圆形盒子的直径 */
         height: 20px; /* 圆形盒子的直径 */
         backgroundColor: #ec8061;
         borderRadius: 50%;  /* 盒子边框的半径设置为50%,使盒子成为圆形 */
         margin-top: 2px;
         margin-left: 24px;
         margin-right: 10px;
        ">
        </div>
        <text style="font-size: 20px">个人中心</text><!--显示文字内容-->
      </div>



      <div style="display: flex;flex-direction: row;margin-top: 50px">

        <div style="border: 0px black solid;width: 65%;margin-right: 20px">
          <div class="section">
            <div style="display: flex;flex-direction:row;width: 100%;border: black 0px solid">
              <div style="width: 16px;  /* 圆形盒子的直径 */
                 height: 16px; /* 圆形盒子的直径 */
                 backgroundColor: #8adba0;
                 borderRadius: 50%;  /* 使盒子成为圆形 */
                 margin-top: 2px;
                 margin-left: 10px;
                 margin-right: 10px;
                ">
              </div>
              <text class="section-title">基本信息</text>
            </div>
            <div class="info-row">
              <label for="username">账号:</label> <!--绑定-->
              <span class="textClass" v-if="userInfo.username" id="username">{{userInfo.username}}</span>
              <span class="textClass" v-else id="address"><text style="font-size: 18px;font-family: STKaiti">---</text></span>
            </div>
            <div class="info-row">
              <label for="nickname">姓名:</label>
              <span class="textClass" v-if="userInfo.realname" id="realname">{{userInfo.realname}}</span>
              <span class="textClass" v-else id="address"><text style="font-size: 18px;font-family: STKaiti">---</text></span>
            </div>
            <div class="info-row">
              <label for="gender">性别:</label>
              <span class="textClass" v-if="userInfo.gender" id="gender">{{userInfo.gender}}</span>
              <span class="textClass" v-else id="address"><text style="font-size: 18px;font-family: STKaiti">---</text></span>
            </div>
            <div class="info-row">
              <label for="birthdate">出生年月:</label>
              <span class="textClass" v-if="userInfo.birthday" id="birthdate">{{userInfo.birthday}}</span>
              <span class="textClass" v-else id="address"><text style="font-size: 18px;font-family: STKaiti">---</text></span>
            </div>
          </div>

          <div class="section">
            <div style="display: flex;flex-direction:row;width: 100%;border: black 0px solid">
              <div style="width: 16px;  /* 圆形盒子的直径 */
                 height: 16px; /* 圆形盒子的直径 */
                 backgroundColor: #8adba0;
                 borderRadius: 50%;  /* 使盒子成为圆形 */
                 margin-top: 2px;
                 margin-left: 10px;
                 margin-right: 10px;
                ">
              </div>
              <text class="section-title">联系方式</text>
            </div>
            <div class="info-row">
              <label for="phone">手机号:</label>
              <span class="textClass" v-if="userInfo.phone" id="phone">{{userInfo.phone}}</span>
              <span class="textClass" v-else id="address"><text style="font-size: 18px;font-family: STKaiti">---</text></span>
            </div>
            <div class="info-row">
              <label for="email">邮箱:</label>
              <span class="textClass" v-if="userInfo.email" id="email">{{userInfo.email}}</span>
              <span class="textClass" v-else id="address"><text style="font-size: 18px;font-family: STKaiti">---</text></span>
            </div>


          </div>

          <div class="section">
            <div style="display: flex;flex-direction:row;width: 100%;border: black 0px solid">
              <div style="width: 16px;  /* 圆形盒子的直径 */
                 height: 16px; /* 圆形盒子的直径 */
                 backgroundColor: #8adba0;
                 borderRadius: 50%;  /* 使盒子成为圆形 */
                 margin-top: 2px;
                 margin-left: 10px;
                 margin-right: 10px;
                ">
              </div>
              <text class="section-title">地址信息</text>
            </div>
            <div class="info-row">
              <label for="address">地址:</label>
              <span class="textClass" v-if="userInfo.address" id="address">{{userInfo.address}}</span>
              <span class="textClass" v-else id="address"><text style="font-size: 18px;font-family: STKaiti">---</text></span>
            </div>
          </div>

          <div class="section">
            <div style="display: flex;flex-direction:row;width: 100%;border: black 0px solid">
              <div style="width: 16px;  /* 圆形盒子的直径 */
                 height: 16px; /* 圆形盒子的直径 */
                 backgroundColor: #8adba0;
                 borderRadius: 50%;  /* 使盒子成为圆形 */
                 margin-top: 2px;
                 margin-left: 10px;
                 margin-right: 10px;
                ">
              </div>
              <text class="section-title">其他信息</text>
            </div>
            <div class="info-row">
              <label for="role">用户角色:</label>
              <span class="textClass" v-if="userInfo.usertype" id="role">{{getUserType(userInfo.usertype)}}</span>
              <span class="textClass" v-else id="address"><text style="font-size: 18px;font-family: STKaiti">---</text></span>
            </div>
          </div>
        </div>

        <!--    按钮和图案    -->
        <div style="border: black 0px solid;width: 35%">
          <div class="section" style="height: 270px;display: flex;justify-items: center">
<!--            <label for="role">头像/照片</label>-->
            <div style="margin-left: 60px;margin-top: 20px">
              <img v-if="!userInfo.avatar && (userInfo.gender === '男' || !userInfo.gender)"
                   style="width: 300px;"
                   src="../../assets/boy.png">
              <img v-else-if="!userInfo.avatar && userInfo.gender === '女'"
                   style="width: 300px;"
                   src="../../assets/girl.png">
              <img v-else
                   style="width: 200px; height: 200px; clip-path: inset(0); object-fit: cover; margin-right: 10px"
                   :src="userInfo.avatar">

            </div>
          </div>
          <div class="section" style="height: 310px;margin-top: 7px;background-color: #8adba0">

            <div class="info-row">
              <div style="display: flex;flex-direction:row;width: 100%;border: black 0px solid">
                <div style="width: 16px;  /* 圆形盒子的直径 */
                 height: 16px; /* 圆形盒子的直径 */
                 backgroundColor: white;
                 borderRadius: 50%;  /* 使盒子成为圆形 */
                 margin-top: 2px;
                 margin-left: 10px;
                 margin-right: 10px;
                ">
                </div>
                <text class="section-title" style="color: white">完善信息</text>
              </div>
            </div>
<!--     弹框弹出；数据渲染       -->
            <button @click="showPersonal=true;clickBefore()" class="custom-button small" style="margin-top: 20px;margin-left: 0px">
<!--              <svg t="1730362148288" class="button-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4790" width="20" height="20"><path d="M420.6 54.7c50-12.7 103-13.4 153.3-1.9 32 7.3 62.8 19.5 91.2 36 24.3 14.1 46.5 31.6 66.6 51.2 20.9 0.1 41.9-0.1 62.8 0.1 31.9 0.9 63 15.1 84.6 38.6 20 21.5 31.7 50.6 32 80v317.7c-3.6-2.1-7.3-4.1-11-6.1-17.1-9.2-33.8-19.5-52-26.5-62.4-25-135.2-22.1-195.3 8-52.7 26-95.3 71.9-117 126.6-14.7 36.6-20 76.8-15.7 116 4.8 44.6 22.7 87.6 50.6 122.7 11.3 14 22.7 27.8 33.9 41.8H228.4c-10.9-0.1-22 0.5-32.8-1.2-17.7-2.5-34.9-9-49.7-19-22.7-15-40-38-48.1-64-3.4-10.4-4.7-21.2-5.7-32V257c0.4-2.5 0.6-5.1 0.7-7.6 1.8-20.9 9.4-41.2 21.5-58.3 15.8-22.6 39.6-39.4 66.2-46.6 11.4-3.2 23.2-4.5 35.1-4.4H270c2 0.1 3-1.8 4.3-2.9 40.2-39.8 91.3-68.6 146.3-82.5m-28 60.2c-16.3 6.8-31.7 15.6-46.5 25.2 103.4-0.1 206.7-0.1 310.1 0-29.2-19.5-62-33.7-96.4-41.1-55.6-12-114.9-6.5-167.2 15.9m-88.1 229.9c-10 0.7-18.7 9.2-19.8 19.2-0.4 5.4-0.6 11.2 1.8 16.2 3.3 7.5 11.1 12.8 19.3 12.9h392c10.3-0.4 19.3-9.1 20.4-19.3 0.4-5.8 0.5-12-2.4-17.3-3.7-7.2-11.6-11.9-19.7-11.7-130.5-0.1-261-0.3-391.6 0m-3.4 181.3c-8.5 2.1-15.2 9.7-16.3 18.4-0.6 5.8-0.6 12.1 2.3 17.4 3.7 7.2 11.6 12.1 19.7 11.9h149.4c10.3-0.1 19.6-8.5 21-18.6 0.6-5.8 0.7-12.1-2.1-17.4-3.6-7.4-11.6-12.3-19.8-12.3H312c-3.7-0.1-7.3-0.4-10.9 0.6m-0.8 180.6c-5.5 1.4-10.3 5.1-13 10.1-3.4 5.6-3 12.4-2.6 18.7 0.9 10.2 10.1 18.8 20.4 18.9h103.6c10.3 0 19.7-8.7 20.6-18.9 0.3-6.3 0.8-13.1-2.6-18.7-3.5-6.4-10.6-10.7-18-10.7H305.9c-1.9-0.1-3.8 0.1-5.6 0.6z" p-id="4791" fill="#e6e6e6"></path><path d="M737.3 552.2c51-5.4 103.9 8.1 145.9 37.7 28.2 19.6 51.7 46.1 67.8 76.4 18.3 34.3 26.9 73.5 24.9 112.3-1.6 35-12 69.5-29.8 99.6-17 28.8-40.8 53.5-68.9 71.7-30 19.5-64.9 31.4-100.6 34.1-34.6 2.8-69.9-2.9-101.9-16.5-30.8-13-58.4-33.3-80.1-58.7-31.6-36.7-50.3-84.4-51.8-132.8-1.4-34.7 5.8-69.6 20.6-100.9 14.1-29.7 35-56.1 60.7-76.6 32.2-26 72-42.3 113.2-46.3m108 136.3c-32.6 35.9-65.1 71.8-97.6 107.7-24.3-22-48.6-44.1-73-66.2-3-2.9-6.3-5.6-10.3-6.9-9.5-3.6-21-0.4-27.1 7.7-7.7 9.4-6.7 24.5 2.4 32.6 27.3 24.8 54.6 49.5 81.9 74.3 4.4 3.9 8.7 8.1 13.3 11.8 9.4 7.3 24.2 6 32.1-2.9l113.7-125.4c8.7-9.5 7.6-26-2.4-34.1-9.2-8.1-24.6-7.5-33 1.4z" p-id="4792" fill="#e6e6e6"></path></svg>
              -->
              <text style="border: black 0px solid;font-family: FZYaoti;">完善信息</text>
            </button>

            <div class="info-row" style="margin-top: 40px">
              <div style="display: flex;flex-direction:row;width: 100%;border: black 0px solid">
                <div style="width: 16px;  /* 圆形盒子的直径 */
                 height: 16px; /* 圆形盒子的直径 */
                 backgroundColor: white;
                 borderRadius: 50%;  /* 使盒子成为圆形 */
                 margin-top: 2px;
                 margin-left: 10px;
                 margin-right: 10px;
                ">
                </div>
                <text class="section-title" style="color: white">修改密码</text>
              </div>
            </div>
            <button @click="showChangePass=true" class="custom-button small" style="margin-top: 20px;margin-left: 0px">
<!--              <svg t="1730362636753" class="button-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5981" width="20" height="20"><path d="M684.202667 117.248c15.893333-15.872 42.154667-15.36 58.922666 1.408l90.517334 90.517333c16.661333 16.661333 17.344 42.986667 1.429333 58.922667l-445.653333 445.653333c-7.936 7.914667-23.104 16.746667-34.218667 19.776l-143.701333 39.253334c-21.909333 5.994667-35.114667-7.104-29.568-28.949334l37.248-146.773333c2.773333-10.944 11.562667-26.346667 19.392-34.176l445.653333-445.653333zM268.736 593.066667c-2.901333 2.901333-8.106667 12.074667-9.130667 16.021333l-29.12 114.773333 111.957334-30.570666c4.437333-1.216 13.632-6.549333 16.810666-9.728l445.653334-445.653334-90.517334-90.496-445.653333 445.653334zM682.794667 178.986667l90.517333 90.517333-30.186667 30.186667-90.496-90.517334 30.165334-30.165333z m-362.026667 362.048l90.496 90.517333-30.165333 30.165333-90.517334-90.496 30.165334-30.186666zM170.666667 874.666667c0-11.776 9.429333-21.333333 21.461333-21.333334h661.077333a21.333333 21.333333 0 1 1 0 42.666667H192.128A21.333333 21.333333 0 0 1 170.666667 874.666667z" fill="#e6e6e6" p-id="5982"></path></svg>
              -->
              <text style="border: black 0px solid;font-family: FZYaoti;">修改</text>
            </button>
          </div>
        </div>
      </div>

      <!--   完善信息表单   -->
      <el-dialog
          @close="cleanpersonalForm"
          v-model="showPersonal"
          title="完善个人信息"
          width="600"
          align-center
          style="height: 500px; /* 固定高度 */
          "
          draggable
          :close-on-click-modal="false"
      >

        <div style="padding: 20px;height: 400px">
          <el-form :model="personalForm" label-position="top"  label-width="100px">

            <el-tabs v-model="personalClass">
              <el-tab-pane label="个人信息" name="personInfo">
                <div style="display: flex;flex-direction: row">
                  <div>
                    <el-form-item label-position="top" label="昵称">
                      <el-input style="width: 150px" v-model="personalForm.nickname"></el-input>
                    </el-form-item>
                    <el-form-item label-position="top" label="真实姓名">
                      <el-input style="width: 150px" v-model="personalForm.realname"></el-input>
                    </el-form-item>
                  </div>
                  <div style="margin-left: 100px">
                    <el-form-item label-position="top" label="头像">
                      <el-upload
                          class="avatar-uploader"
                          :action="UploadUrl()"
                          :show-file-list="false"
                          accept=".jpg,.png"
                          @change="onFileChange"
                          :before-upload="beforeAvatarUpload"
                          :http-request="uploadHttpRequest"
                      >
                        <img style="height: 110px" v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                      </el-upload>
                    </el-form-item>
                  </div>

                </div>
                <el-form-item label="性别">
                  <el-radio-group v-model="personalForm.gender">
                    <el-radio label="男">男</el-radio>
                    <el-radio label="女">女</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="出生年月">
                  <el-date-picker

                      v-model="personalForm.birthday"
                      type="date"
                      placeholder="选择日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-tab-pane>

              <el-tab-pane label="联系方式" name="numInfo">
                <el-form-item label="邮箱">
                  <el-input style="width: 200px" v-model="personalForm.email"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                  <el-input style="width: 200px" v-model="personalForm.phone"></el-input>
                </el-form-item>

                <el-form-item label="地址" >
                  <el-input type="textarea" style="width: 400px" v-model="personalForm.address"></el-input>
                </el-form-item>
              </el-tab-pane>
            </el-tabs>

          </el-form>
        </div>

        <template #footer>
          <div style="margin-top: -20px">
            <el-button @click="showPersonal = false">取 消</el-button>
            <el-button type="primary" @click="updatePersonal">
              确 认
            </el-button>
          </div>
        </template>
      </el-dialog>


      <!--   修改密码表单   -->
      <el-dialog
          v-model="showChangePass"
          title="修改密码"
          width="500"
          center
          align-center
          style="height: 330px"
      >
        <div>
          <el-form :model="changePassform" ref="formRef">
            <el-form-item style="margin-top: 10px" label="当前密码" prop="currentPassword" :rules="[{ required: true, message: '', trigger: 'blur' }]">
              <el-input
                  style="width: 200px;margin-left: 16px"
                  type="password"
                  v-model="changePassform.currentPassword"
                  placeholder="请输入"
              />
            </el-form-item>

            <el-form-item style="margin-top: 30px" label="新密码" prop="newPassword" :rules="[{ required: true, message: '', trigger: 'blur' }]">
              <el-input
                  type="password"
                  v-model="changePassform.newPassword"
                  placeholder="请输入"
                  style="width: 200px;margin-left: 30px"
              />
            </el-form-item>

            <el-form-item style="margin-top: 30px" label="确认新密码" prop="confirmPassword" :rules="[{ required: true, message: '', trigger: 'blur' }]">
              <el-input
                  type="password"
                  v-model="changePassform.confirmPassword"
                  placeholder="请再次输入"
                  style="width: 200px;margin-left: 2px"
              />
            </el-form-item>
          </el-form>
        </div>

        <template #footer>
          <div class="dialog-footer">
            <el-button style="width: 80px" @click="showChangePass = false">取消</el-button>
            <el-button style="width: 80px" type="primary" @click="handleSubmit">确认</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue';
import {useUserStore} from "@/stores/user/user.js";
import moment from 'moment';
import {ElMessage} from "element-plus";
import {changePassService, getUserService, updateClientService} from "@/api/user.js"
import router from "@/router";
import { Plus } from '@element-plus/icons-vue'
const userStore=useUserStore()//获取用户信息
const userInfo=ref({})//存储当前用户的信息。
onMounted(async () => {
  userInfo.value=await userStore.getUser()
  userInfo.value.birthday=moment(userInfo.value.birthday).format('YYYY-MM-DD')
});

import type { UploadProps } from 'element-plus'
import {upload} from '@/api/upload.js'

const imageUrl = ref('')//存储用户上传成功后的头像地址
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('头像大小不能超过2MB')
    return false
  }
  return true
}

const UploadUrl = () => {
  // 因为action参数是必填项，我们使用二次确认进行文件上传时，直接填上传文件的url会因为没有参数导致api报404，
  // 所以这里将action设置为一个返回为空的方法就行，避免抛错
  return ""
}

//渲染角色
const getUserType=((type)=>{
  if (type==='counselor'){
    return '咨询师'
  }else if(type==='client'){
    return '来访者'
  }
})

//上传请求函数（占位）
const uploadHttpRequest=((data)=>{

})

//文件选择变化的处理
const onFileChange=(async (file)=>{
  console.log(file)//事件参数传递
  imageUrl.value = URL.createObjectURL(file.raw!)//生成临时图片链接，立即在前端显示头像预览。
  const res=await upload(file.raw)
  console.log(res)
  if (res.code===200){
    personalForm.value.avatar=res.message//如果上传成功，将服务器返回的图片路径
  }
})

//用户资料编辑模块
const personalClass=ref('personInfo')
const personalForm=ref({  //用于控制样式切换，比如展示不同的页面模块。
  userid:'',
  nickname: '',
  realname: '',
  avatar:'',
  gender: '',
  email: '',
  phone: '',
  birthday: null,
  address: '',
  usertype:''
})
const showPersonal=ref(false)//控制“编辑个人信息”弹窗是否显示。
const updatePersonal=(async ()=>{
  const res=await updateClientService(personalForm.value)
  if (res.code===200){
    //刷新页面
    let userRes=await getUserService()//重新从服务器获取最新用户信息，防止数据不同步。
    if (userRes.code===200){
      userInfo.value=userRes.data
      userInfo.value.birthday=moment(userInfo.value.birthday).format('YYYY-MM-DD')
      userStore.setUser(userRes.data)//覆盖缓存
      ElMessage.success(res.message)
      showPersonal.value=false
    }
  }else {
    ElMessage.warning(res.errMsg)
  }

})

//清空个人信息表单
const cleanpersonalForm=(()=>{
  personalForm.value={
    userid:'',
    nickname: '',
    realname: '',
    avatar:'',
    gender: '',
    email: '',
    phone: '',
    birthday: null,
    address: '',
    usertype:''
  }
})

//点击编辑按钮之前执行的操作。
const clickBefore=(()=>{
  personalForm.value={...userInfo.value}//将当前用户信息赋值到表单中
  console.log(personalForm.value)
  imageUrl.value=personalForm.value.avatar//头像上传组件的预览显示
})


//修改密码
const showChangePass = ref(false)
const changePassform = ref({
  currentPassword: '',
  newPassword: '',
  confirmPassword: '' //确认新密码，防止输错
});

// 提交表单的方法
const handleSubmit = async () => {
  const { currentPassword, newPassword, confirmPassword } = changePassform.value;

  if (currentPassword||newPassword||confirmPassword){
    // 检查新密码和确认密码是否匹配
    if (newPassword !== confirmPassword) {
      ElMessage.warning('新密码与确认密码不匹配');
    }else{
      //防止用户将密码修改成和旧密码一样。
      if (currentPassword!==newPassword){
        const res=await changePassService(new URLSearchParams({ //方法进行密码更新
          currentPassword:currentPassword,
          newPassword:newPassword
        }))
        console.log(res)
        if (res.code===200){
          ElMessage.success(res.message)
          // 提交成功后关闭模态框并重置表单
          showChangePass.value = false;
          resetForm();
          //退出登录
          ElMessage.success("退出登录")
          userStore.logout()//数据清空
          await router.push('/')//跳转登录页
        }else {
          //后端返回错误信息时展示。
          ElMessage.warning(res.errMsg)
        }

      }else {
        ElMessage.warning('新密码与原密码相同');
      }
    }
  }else {
    ElMessage.warning("请填写完整")
  }


};

// 重置表单
const resetForm = () => {
  changePassform.value.currentPassword = '';
  changePassform.value.newPassword = '';
  changePassform.value.confirmPassword = '';
};
</script>

<style>

.dialog-footer {
  display: flex;
  justify-content: center;
}

.custom-button {
  background-color: white;
  color: black;
  padding: 10px 20px; /* 调整按钮大小 */
  text-align: center;
  text-decoration: none;
  display: flex;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s;
  margin: 0 10px; /* 按钮间距 */
  justify-content: center;
  align-items: center;
}


.demo-date-picker {
  display: flex;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 0;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.custom-button.small {
  padding: 8px 16px; /* 较小按钮的内边距 */
}

.custom-button:hover {
  background-color: #f6f6f6;
  transform: scale(1.05);
}

.custom-button:active {
  transform: scale(0.95);
}

.button-icon {
  color: black;
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.awsCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.section {
  width: 100%;
  margin-bottom: 20px; /* 缩小间距 */
  padding: 15px; /* 增加内边距 */
  background-color: #f6f6f6; /* 背景颜色 */
  border-radius: 20px; /* 圆角 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  transition: transform 0.2s ease; /* 添加浮起效果 */
}

.section:hover {
  transform: translateY(-5px); /* 鼠标悬停时浮起 */
}

.section-title {
  font-size: 18px;
  color: black; /* 标题颜色 */
  margin-bottom: 15px; /* 标题下边距 */
}

.info-row {
  display: flex;
  justify-content: flex-start;
  padding: 5px 0; /* 信息行的上下内边距 */
  border-bottom: #DCDCDC 1px solid;
}

label {
  font-weight: bold;
  color: #555; /* 标签颜色 */
  flex-basis: 30%; /* 标签宽度 */
}

.textClass {
  color: #333; /* 内容颜色 */
  flex-basis: 80%; /* 内容宽度 */
  font-family: YouYuan;
  font-size: 20px;
}



.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 110px;
  height: 110px;
  text-align: center;
}

</style>
